<template>
  <div class="featH">
    <NewCard title="推荐内容" :isScroll="true" v-if="currActiveShow == 1">
      <!-- 推荐内容页面 -->
      <div class="swiper-container" ref="swiper" v-show="swiperBanner">
        <!-- 关闭按钮 -->
        <i class="el-icon-error" @click="bannerClose"></i>
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
            <img :src="item.photo" @click="skipLink(item)"/>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      
      <!-- 折叠面板 -->
      <div class="right_collapse">
        <el-collapse v-model="collapseAction" accordion ref="collapse">
          <el-collapse-item
            disabled
            :name="index"
            v-for="(active, index) in activeList"
            :key="active.id"
          >
            <template slot="title">
              <h2 @mouseenter="hoverCollaps(index)">{{ active.title }}</h2>
              <!-- <i class="firstWord">{{ getHanzi(active.title) }}</i> -->
              <!-- 内容信息 -->
              <p
                class="coll_des"
                v-show="collapseAction == index ? false : true">
                {{ active.background }} {{ getDetail(active) }}
              </p>
              <p
                class="coll_source"
                v-show="collapseAction == index ? false : true">
                {{ active.from }} · {{ active.publishTime ? active.publishTime.substring(0,10) : active.createTime.substring(0,10) }}
              </p>
            </template>
            <!-- 内容摘要 -->
            <div class="coll_content">
              <p>{{ active.background }} {{ getDetail(active) }}</p>
              <a class="more_btn" @click="clickMore(active)">阅读全文>></a>
            </div>
            <Ribbon :detail="active" :isFeat="isFeat"></Ribbon>
          </el-collapse-item>
        </el-collapse>
      </div>
    </NewCard>
    <!--  -->
    <div class="detailPage" v-else-if="currActiveShow == 2">
      <DetailPage
        :currentDetail="currActive"
        :listActive="currActive.esType"
        ref="detailPage"
      >
      </DetailPage>
    </div>

    <!-- 支付页面 -->
    <div class="payBox" v-else>
      <!-- :listActive="listActive" -->
      <Pay :currentDetail="currActive" :goodsList="goodsList" :isEmailOrDown="isEmailOrDown" :isFeat="isFeat"></Pay>
    </div>
  </div>
</template>

<script>
//引入Swiper
import Swiper from "swiper";
import "swiper/css/swiper.css";
import NewCard from "@/wss/components/newCard.vue";
import Ribbon from "@/components/Ribbon/ribbon.vue";
import DetailPage from "./detailPage.vue";
import Pay from "./Pay.vue";
import {
  getCarouselListApi,
  getDocRecommendApi,
  getLawGetInfoApi,
  getQaGetInfoApi,
  getTopGetInfoApi,
  getScontractGetInfoApi,
} from "@/BMViews/api/work/carousel.js";
export default {
  name: "featuredContent",
  components: { NewCard, Ribbon, DetailPage, Pay },
  data() {
    return {
      pageing: { pageNum: 1, pageSize: 10 }, //分页
      //banner图
      bannerList: [],
      //显示隐藏banner
      swiperBanner: true,
      collapseAction: 0, //折叠面板默认打开
      activeList: [], //推荐文章列表

      currActiveShow: 1, // 是否显示阅读原文 1显示推荐 2显示内容 3支付页
      currActive: {}, //当前点击的文章
      goodsList: {},//当前点击的文章是否购买

      isFeat: true, //代表当前是推荐页点击进去的支付页面，传值给ribbon组件

      isEmailOrDown: false,// 是否点击的是true电邮还是false下载文档
    };
  },
  // 离开路由的钩子
  beforeRouteLeave (to, from, next) {
    if(this.$refs.detailPage){
      this.$refs.detailPage.getArticleTime() // 计算在文章内停留的时间
    }
    next();
  },
  async mounted() {
    this.getCarouselList(); //获取轮播图列表
    this.getDocRecommend(); //获取推荐文章列表

    //通过$bus 子组件修改当前显示的
    this.$bus.$on("featHandlerShow", (num, detail, goodsList, isEmailOrDown) => {
      this.currActiveShow = num;
      this.currActive = detail
      this.goodsList = goodsList
      this.isEmailOrDown = isEmailOrDown
    });

    // 返回
    this.$bus.$on("returnBtnShow",(num)=>{
      this.currActiveShow = num;
    })

    // 分享链接 路由传参过来的******************
    if(this.$route.query.id){
      let id = this.$route.query.id
      let esType = this.$route.query.esType  //1法条 2解答 3政策 4合同 
      if(esType == '1'){
        await this.getLawGetInfo(id) // 查询法条文章的内容的接口
        this.currActive.esType = esType
        this.currActiveShow = 2 //显示内容
      }else if(esType == '2'){
        await this.getQaGetInfo(id) // 查询解答文章的内容的接口
        this.currActive.esType = esType
        this.currActiveShow = 2 //显示内容
      }else if(esType == '3'){
        await this.getTopGetInfo(id) // 查询政策文章的内容的接口
        this.currActive.esType = esType
        this.currActiveShow = 2 //显示内容
      }else if(esType == '4'){
        await this.getScontractGetInfo(id) // 查询政策文章的内容的接口
        this.currActive.esType = esType
        this.currActiveShow = 2 //显示内容
      }
    }
    // 分享链接 路由传参过来的******************end
  },
  methods: {
    getDetail(item) {
      // 1 法律 2 问答 3 头条 4 合同 5 咨询
      let arr = ["3", "4", "5"];
      if (item.esType == '2') {
        return item.answer[0].content;
      } else if (item.esType == '1') {
        return item.history
      }else if (arr.includes(item.esType)) {
        return item.info[0].content;
      } else {
        return item.info[0].content[0];
      }
      // switch (item.esType) {
      //   case "1":

      //     return

      //   default:
      //     break;
      // }
      console.log(item);
    },
    //关闭轮播图
    bannerClose() {
      this.swiperBanner = false;
    },
    //获取轮播图列表
    async getCarouselList() {
      let result = await getCarouselListApi(this.pageing);
      if (result.code == 200) {
        // 过滤出web端的广告图
        this.bannerList = result.rows.filter(item=>{
          return item.clientType == '1'
        })
        // -----------------------计算跳转页面的链接-----------------------
        this.bannerList.forEach(item=>{
          if(item.skipType == '5'){
            // 咨询
            let arr = item.param.split(',')
            item.link = `/Bm-Consult/${arr[1]}?typeId=${arr[2]},${arr[3]}`

          }else if(item.skipType == '6'){
            // 项目
            let arr = item.param.split(',')
            item.link = `/Bm-project/${arr[1]}?typeId=${arr[2]},${arr[3]}`
          }
        })
        // -----------------------计算跳转页面的链接-----------------------end
      }
    },

    // 点击轮播图跳转
    skipLink(item){
      this.$router.push({path: item.link})
    },

    //鼠标经过展开面板
    hoverCollaps(index) {
      setTimeout(() => {
        this.collapseAction = index;
      }, 50);
      //隐藏电邮和分享窗口 isShowCard
      this.$bus.$emit('hiddenCard',false)
      // console.log(item);
    },
    //获取推荐文章列表
    async getDocRecommend() {
      let result = await getDocRecommendApi(this.pageing);
      if (result.code == 200) {
        this.activeList = result.data.rows;
        // console.log(this.activeList, "推荐页");
      }
    },

    //点击阅读原文按钮
    clickMore(active) {
      if (this.$store.getters.token) {
        //通知父组件展示详情页面  还差一个当前文章对应那四个类的type类型
        this.currActive = active;
        //显示阅读原文
        this.currActiveShow = 2;
      }else{
        this.$message({type:'warning',message:'请登录！'})
        this.$router.push('/Bm-personalCenter/login')
      }
    },

    //获取第一个汉字
    getHanzi(name) {
      if(name){
        let arr = name.split('')
        let reg = /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/
        let str = ''
        for (let i = 0; i < arr.length; i++) {
          if(!reg.test(arr[i])){
            return arr[i]
          }
        }
      }
    },

    // 查询法条文章的内容的接口
    async getLawGetInfo(id){
      let result = await getLawGetInfoApi(id)
      if(result.code==200){
        this.currActive = result.data
      }
    },
    // 查询解答文章的内容的接口
    async getQaGetInfo(id){
      let result = await getQaGetInfoApi(id)
      if(result.code==200){
        this.currActive = result.data
      }
    },
    // 查询政策文章的内容的接口
    async getTopGetInfo(id){
      let result = await getTopGetInfoApi(id)
      if(result.code==200){
        this.currActive = result.data
      }
    },
    // 查询合同文章的内容的接口
    async getScontractGetInfo(id){
      let result = await getScontractGetInfoApi(id)
      if(result.code==200){
        this.currActive = result.data
      }
    },
    
  },
  watch: {
    bannerList: {
      //监听属性：立即监听，不管属性有没有发生变化，立即执行一次。
      immediate: true,
      handler() {
        //监听到属性变化，立即初始化swiper实例
        this.$nextTick(() => {
          new Swiper(this.$refs.swiper, {
            loop: true,
            autoplay: {
              delay: 2000, //2秒切换一次
            },
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //分页器小球点击的时候切换图片
              clickable: true,
            },
          });
        });
      },
    },
  },
};
</script>

<style scoped>
.featH {
  height: 100%;
}
.recommend > div,
.featH > .detailPage,
.payBox {
  height: 100%;
}
.featH .payBox >>> .el-card{
  position: relative;
}
.featH >>> .el-card__body,
.featH >>> .el-card__body > div{
  position: initial;
}
.featH >>> .detailPage .el-card{
  position: absolute;
}
/* 右边推荐内容 */
::v-deep .el-collapse-item__wrap {
  overflow: inherit !important;
}
.label-box-content .recommend >>> .el-card__body > div {
}
.recommend >>> .top .left h1 {
  margin: 25px 0;
}

/* 轮播图 */
.swiper-container {
  position: relative;
}
.swiper-container > i {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999;
  cursor: pointer;
  opacity: 0.3;
}
.swiper-container img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}
.swiper-container >>> .swiper-pagination-bullet {
  width: 20px;
  height: 4px;
  border-radius: 4px;
  background-color: #fff;
  opacity: 1;
}
.swiper-container >>> .swiper-pagination-bullet-active {
  background-color: #f87a23;
}

/* 折叠面板 */
.el-collapse {
  border: 0;
}
.el-collapse-item {
  position: relative;
  /* padding-left: 46px; */
  cursor: pointer;
}
.el-collapse-item .firstWord {
  position: absolute;
  left: 0;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
  cursor: pointer;
}

.el-collapse .el-collapse-item:nth-child(even) .firstWord {
  background-color: #b1bedf;
}
.el-collapse-item >>> .el-collapse-item__header {
  display: block;
  height: auto;
  line-height: auto;
}
.el-collapse-item >>> .el-collapse-item__arrow {
  position: absolute;
  right: 0;
  top: 18px;
}
.el-collapse-item >>> .el-collapse-item__header > h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #333;
  margin: 0;
  padding-top: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.el-collapse-item .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  cursor: pointer;
}
.el-collapse-item .coll_source {
  margin: 0;
  padding-top: 6px;
  padding-bottom: 30px;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
  cursor: pointer;
}
.el-collapse-item >>> .el-collapse-item__content {
  padding-bottom: 0px;
}
.el-collapse-item .coll_content {
  color: #666;
}
.el-collapse-item .coll_content > p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.el-collapse-item .coll_content > .more_btn {
  color: #f87a23;
}
::v-deep .el-collapse-item .ribbon{
  padding: 10px 0;
}
/*
  .el-collapse-item .ribbon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .el-collapse-item .ribbon>ul{
    display: flex;
    padding: 0;
  }
  .el-collapse-item .ribbon>ul li{
    display: flex;
    list-style: none;
    color: #999;
    margin-right: 20px;
  }
  .el-collapse-item .ribbon>ul li>svg{
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    font-size: 20px;
    color: #b7b7b7;
  }

  .el-collapse-item .ribbon .ribbon_btn>.el-button{
    color: #F87A23;
    border-color: #F87A23;
  }
  .el-collapse-item .ribbon .ribbon_btn>.ribbon_down{
    color: #fff;
    background-color: #F87A23;
  }
  .el-collapse-item .ribbon .ribbon_btn>.el-button:hover{
    background-color: #f89723;
    color: #fff;
  }*/
  @media (max-width: 1120px) {
    .el-collapse-item >>> .el-collapse-item__header > h2{
    }

  }
</style>